{% extends "vmServer/index_server.html" %}

{% block content %}

								<div class="row">
									<div class="col-xs-12">
									
										<botton class="btn btn-primary  pull-right" data-toggle="modal" data-target="#addPoolModal">
											<i class="icon-arrow-right icon-plus"></i>
													新增储存池
										</botton>
									
										<h3 class="header smaller lighter blue">
										<i class="icon-hand-right icon-animated-hand-pointer blue"></i>
										{{ vmServer.hostname }}存储池详情</h3>
										
										<div class="table-header">
											当前可操作的存储池
										</div>

										<div class="table-responsive">
											<table id="sample-table-2" class="table table-striped table-bordered table-hover">
												<thead>
													<tr>
														<th >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
															</label>
															存储池名
														</th>
														<th>类型</th>
														<th>容量(GB)</th>
														<th class="hidden-480">使用率(%)</th>

														<th>
															<i class="icon-time bigger-110 hidden-480"></i>
															卷个数
														</th>

														<th class="hidden-480">状态</th>

														<th class="col-sm-2 center">操作</th>
													</tr>
												</thead>

												<tbody>
												{% for ds in storageList %}
													<tr>
														<td >
															<label>
																<input type="checkbox" class="ace" />
																<span class="lbl"></span>
																{{ ds.pool_name }}
															</label>														
															
														</td>

														<td>
															{{ ds.pool_type }}
														</td>
														<td class="col-xs-1">
															{{ ds.pool_size }}
																														
														</td>
														<td class="hidden-480">
															<div class="progress  progress-striped" data-percent="{{ ds.pool_per }}%">
																{% if ds.pool_per > 90  %}
															<div class="progress-bar progress-bar-danger" style="width: {{ ds.pool_per }}%;"></div>
																{% elif 70 < ds.pool_per and ds.pool_per < 90 %}
															<div class="progress-bar progress-bar-yellow" style="width: {{ ds.pool_per }}%;"></div>
																{% else %}
															<div class="progress-bar progress-bar-success" style="width: {{ ds.pool_per }}%;"></div>
															{% endif %}
													</div>	
																												
														</td>
														<td>
															<span class="badge badge-success">{{ ds.pool_volumes }}</span>
															
														</td>
														<td class="hidden-480">
															{% if ds.pool_active == 1 %}
																<span class="label label-success arrowed">
																	Online
																</span>
															{% else %}
																<span class="label label-danger arrowed-in">
																	Offline
																</span>												
															{% endif %}															
															
														</td>

														<td class="center">
															<div class="visible-md visible-lg hidden-sm hidden-xs action-buttons">																
																<a class="green" href="/viewStorage/{{ vmServer.id }}/{{ ds.pool_name }}">
																	<i class="icon-zoom-in bigger-130"></i>
																</a>
																<a class="blue" href="javascript:" onclick="onBtnHandleStorage(this,{{ vmServer.id }},'{{ vmServer.server_ip }}','{{ ds.pool_name }}','refresh')">
																	<i class="icon-refresh bigger-130"></i>
																</a>
																<a class="red" href="javascript:" onclick="onBtnHandleStorage(this,{{ vmServer.id }},'{{ vmServer.server_ip }}','{{ ds.pool_name }}','delete')">
																	<i class="icon-trash bigger-130"></i>
																</a>
															</div>																			
														</td>

													</tr>
												{% endfor %}
												</tbody>
											</table>
										</div>
									</div>
									
									<div class="modal fade" id="addPoolModal" tabindex="-1" role="dialog" aria-labelledby="addPoolModalLabel" aria-hidden="true">
										<div class="modal-dialog">
											<div class="modal-content">
												<div class="modal-header">
													<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
														&times;
													</button>
													<h4 class="modal-title" id="addPoolModalLabel">
														{{ vmServer.hostname }}添加存储池
													</h4>
												</div>
												<div class="modal-body">
													
													
													<form class="form-horizontal" role="form" id="addStroage">
														<div class="form-group">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-1">
																 <strong>
																 	虚拟管理器
																 </strong> 
															</label>
					
															<div class="col-sm-9">
																<input class="input-sm" type="text"   value="{{ vmServer.server_ip }}" disabled/>	
															</div>
															<div class="col-sm-9" style="display: none;">
																<input class="input-sm" type="text" name="pool_server"   value="{{ vmServer.id }}"/>	
															</div>										
														</div>
					
														<div class="form-group">
															<label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"><strong> 类型</strong> </label>
					
															<div class="col-sm-9">
																<select id="pool_type" name="pool_type" onchange="javascript:oBtStorageTypeSelect();">
																	<option value="dir">DIR</option>
																	<option value="disk">DISK</option>	
																	<option value="logical">LOGICAL</option>	
																	<option value="nfs">NFS</option>	
																	<option value="iscsi">iSCSI</option>	
																	<option value="zfs">ZFS</option>
																	<option value="gluster">GLUSTER</option>								
																</select>	
															</div>
														</div>
					
														<div class="form-group">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>名称</strong></label>
					
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_name" placeholder="Name" value=""/>											
																<div class="space-2"></div>									
															</div>
														</div>
														<div class="form-group" style="display: none;" id="div_pool_host">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>主机地址</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_host" placeholder="host address" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>	
														<div class="form-group" style="display: none;" id="div_pool_logical">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>设备地址</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_spath" placeholder="/dev/sdb1" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>										
														<div class="form-group" style="display: none;" id="div_pool_disk">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>磁盘路径</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_spath" placeholder="/dev/sdb" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>		
														<div class="form-group" style="display: none;" id="div_pool_iscsi">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>ISCSI路径</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_spath" placeholder="iqn.2013-06.com.example:iscsi-pool" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>																		
														<div class="form-group" style="display:none;" id="div_pool_uri">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>URI</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_spath" placeholder="/uri_path/" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>																	
														<div class="form-group" style="display:none;" id="div_pool_spath">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>原路径</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_spath" placeholder="/path/" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>																			
														<div class="form-group" id="div_pool_tpath">
															<label class="col-sm-3 control-label no-padding-right" for="form-field-3"><strong>存储路径</strong></label>
															<div class="col-sm-9">
																<input class="input-sm" type="text" name="pool_tpath" placeholder="/path/" value="" />											
																<div class="space-2"></div>									
															</div>
														</div>									
														<div class="space-4"></div>																				
													</form>
													
													
												</div>
												<div class="modal-footer">
													<button type="button" class="btn btn-default" data-dismiss="modal">关闭
													</button>
													<button type="button" class="btn btn-primary" onclick="addVmStorage(this)">
														添加
													</button>
												</div>
											</div><!-- /.modal-content -->
										</div><!-- /.modal -->
									</div>	
									
									
								</div>
								
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='/static/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>


		<!-- page specific plugin scripts -->

		<script src="/static/js/jquery.dataTables.min.js"></script>
		<script src="/static/js/jquery.dataTables.bootstrap.js"></script>

		<script type="text/javascript">

		
		   function oBtStorageTypeSelect() {
			   var obj = document.getElementById("pool_type"); 
			   var index = obj.selectedIndex;
			   var value = obj.options[index].value; 
			   if (value=="dir"){
				   document.getElementById("div_pool_host").style.display="none";   
				   document.getElementById("div_pool_uri").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="none";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="";
			   }
			   else if (value=="nfs"){
				   document.getElementById("div_pool_host").style.display="";   
				   document.getElementById("div_pool_uri").style.display="";
				   document.getElementById("div_pool_spath").style.display="none";
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="none";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="";
			   }
			   else if (value=="logical"){
				   document.getElementById("div_pool_host").style.display="none";   
				   document.getElementById("div_pool_uri").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";	
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="";
			   }			   
			   else if (value=="disk"){
				   document.getElementById("div_pool_host").style.display="none";   
				   document.getElementById("div_pool_uri").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";	
				   document.getElementById("div_pool_disk").style.display="";
				   document.getElementById("div_pool_logical").style.display="none";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="";
			   }	
			   else if (value=="iscsi"){
				   document.getElementById("div_pool_host").style.display="";   
				   document.getElementById("div_pool_uri").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";	
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="none";
				   document.getElementById("div_pool_iscsi").style.display="";
			   }
			   else if (value=="zfs"){
				   document.getElementById("div_pool_host").style.display="none";   
				   document.getElementById("div_pool_uri").style.display="";
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="none";
			   }			   
			   else if (value=="gluster"){
				   document.getElementById("div_pool_host").style.display="";   
				   document.getElementById("div_pool_uri").style.display="";	
				   document.getElementById("div_pool_disk").style.display="none";
				   document.getElementById("div_pool_logical").style.display="none";
				   document.getElementById("div_pool_iscsi").style.display="none";
				   document.getElementById("div_pool_spath").style.display="none";
				   document.getElementById("div_pool_tpath").style.display="none";
			   }			   
		   }		
		
		   
			function addVmStorage(obj) {
				var btnObj = $(obj);
					btnObj.attr('disabled',true);
				var server_data = {};
				var form = document.getElementById('addStroage');
				for (var i = 1; i < form.length; ++i) {
					var name = form[i].name;
					var value = form[i].value;
					if ( value.length != 0){
						server_data[name] = value;
					}			
				};
				$.ajax({
					dataType: "JSON",
					url:'/addStorage/{{vmServer.id}}/', //请求地址
					type:"POST",  //提交类似
					data:server_data,  //提交参数
					success:function(response){
						btnObj.removeAttr('disabled');
						if (response["code"] == 200){
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);
						}
						else {
							window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						}
						
					},
			    	error:function(response){
			    		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
			    	}
				})	
			}		
		
			jQuery(function($) {
				var oTable1 = $('#sample-table-2').dataTable( {
				"aoColumns": [
			      { "bSortable": false },
			      null, null,null, null, null,
				  { "bSortable": false }
				] } );
				
				
				$('table th input:checkbox').on('click' , function(){
					var that = this;
					$(this).closest('table').find('tr > td:first-child input:checkbox')
					.each(function(){
						this.checked = that.checked;
						$(this).closest('tr').toggleClass('selected');
					});
						
				});
			
			
				$('[data-rel="tooltip"]').tooltip({placement: tooltip_placement});
				function tooltip_placement(context, source) {
					var $source = $(source);
					var $parent = $source.closest('table')
					var off1 = $parent.offset();
					var w1 = $parent.width();
			
					var off2 = $source.offset();
					var w2 = $source.width();
			
					if( parseInt(off2.left) < parseInt(off1.left) + parseInt(w1 / 2) ) return 'right';
					return 'left';
				}
			})

			
	   function onBtnHandleStorage(obj, server_id,server_ip,pool_name,op){
			var btnObj = $(obj);
			if ( op == 'delete'){
				var txt=  "是否确认删除？"
			}
			else if ( op == 'disable'){
				var txt=  "是否确认禁用？"
			}
			else if ( op == 'refresh'){
				var txt=  "是否确认刷新？"
			}			;				
			var option = {
					title: "操作主机("+server_ip+")",
					btn: parseInt("0011",2),
					onOk: function(){
						$.ajax({
							  type: 'POST',
							  url: '/handleStorage/{{vmServer.id}}/',
							  data:{
									"server_id":server_id,		
									"op":op,
									"pool_name":pool_name
								},
						      success:function(response){			            
					                if (response["code"]=="200"){ 
					                	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.success);

					                }
						        	else{
						        		window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
						        	}						                
							},
				            error:function(response){
				            	window.wxc.xcConfirm(response["msg"], window.wxc.xcConfirm.typeEnum.error);
				            },		
							});
					},
					onCancel:function(){	
					},
					onClose:function(){
					}
				}			
			window.wxc.xcConfirm(txt, "custom", option);
		}			
			
			
			
</script>								

{% endblock %}